<template>
    <el-row id="row-au">
      <el-col :span="6">
        <el-autocomplete
            class="el-autocomplete"
            v-model="startPlace"
            :fetch-suggestions="querySearch"
            createable
            placeholder="请输入城市"
            @select="handleSelect"
        ><template #prepend>出发</template>
        </el-autocomplete>
      </el-col>
      <el-col :span="2">&lt; <el-button @click="exchange">换</el-button> ></el-col>
      <el-col :span="6">
        <el-autocomplete
            class="el-autocomplete"
            v-model="endPlace"
            :fetch-suggestions="querySearch"
            createable
            placeholder="请输入城市"
            @select="handleSelect"
        ><template #prepend>到达</template>
        </el-autocomplete>
      </el-col>
      <el-col :span="6">
        <el-date-picker
            id="time"
            v-model="date1"
            type="date"
            placeholder="请选择日期"
            :size="size"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
        >
        </el-date-picker>
      </el-col>
      <el-button id="bt-search" @click="search">搜索</el-button>
    </el-row>

  <el-card id="busForm" v-model="ticket">
    <el-row id="form-row">
      <el-col  :span="4">发车时间</el-col>
      <el-col  :span="4">出发/到达</el-col>
      <el-col  :span="6">参考车型</el-col>
      <el-col  :span="6">价格</el-col>
    </el-row>
    <el-row id="row" v-for="items in ticket" >
            <el-col class="col" :span="4"><div id="div-time">{{items.startTime}}</div></el-col>
            <el-col class="col" :span="4">
              <div class="col-div">
                {{items.startPlace}}
              </div>
              <div class="col-div">
                {{items.endPlace }}
              </div>
            </el-col>
            <el-col class="col" :span="6"><span id="span-type">{{ items.busType }}</span></el-col>
      <el-col class="col" :span="6"><div id="div-price">￥{{items.price}}</div></el-col>
      <el-col class="col" :span="4"><el-button @click="open" id="bt-book">预订</el-button></el-col>
    </el-row>
  </el-card>
</template>

<script>
import axios from "axios";
import store from "../../store";
import {ElNotification} from "element-plus";


export default {
  name: 'BusSearchResult',
  data() {
    return {
      data:{
        busInfo:[]
      },
      restaurants:[],
      date1: "",
      startPlace: "",
      endPlace:"",
      size:"",
      ticket:[],
    }
  },
  setup(){
    const open = () => {
      ElNotification({
        title: 'Success',
        message: '预订成功',
        type: 'success',
      })
    }
    return {
      open
    }
  },
  methods: {
    querySearch(queryString, cb) {
      let restaurants = this.restaurants;
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        {"value": "北京"},
        {"value": "上海"},
        {"value": "广州"},
        {"value": "深圳"},
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
    exchange(){
      let place = this.startPlace;
      this.startPlace=this.endPlace;
      this.endPlace=place;
    },
    search(){
      console.log(this.date1);
      let j = 0;
      this.ticket.length=0;
        axios.get("bus-tickets.json").then(res=>{
          this.data=res.data;
          for(let i = 0; i <this.data.busInfo.length;i++){
            if(this.startPlace==this.data.busInfo[i].startPlace && this.endPlace ==this.data.busInfo[i].endPlace && this.date1 == this.data.busInfo[i].date){
              this.ticket.length+=1;
              this.ticket[j++] = this.data.busInfo[i];
              console.log(this.ticket);
            }
          }
          console.log(this.date1);
      })
    },
    init(){
      let j=0;
      axios.get("bus-tickets.json").then(res=>{
        this.data=res.data;
        for(let i = 0; i <this.data.busInfo.length;i++){
          if(this.startPlace==this.data.busInfo[i].startPlace && this.endPlace ==this.data.busInfo[i].endPlace && this.date1 == this.data.busInfo[i].date){
            this.ticket[j++] = this.data.busInfo[i];
            console.log("---this is  Init data",this.ticket);
          }
        }
      })
    }

  },
  mounted() {
    this.restaurants = this.loadAll();
    this.startPlace = store.state.busTicketInfo.startPlace;
    this.endPlace = store.state.busTicketInfo.endPlace;
    this.date1 = store.state.busTicketInfo.date;
    this.init();
  }
}
</script>
<style scoped>
#row-au{
  margin-top: 10px;
  padding-top: 15px;
  position: relative;
  left: 200px;
  width: 1030px;
  height: 60px;
  border: 1px Solid #d3dce6;
  background: #d3dce6;
}
.el-autocomplete{
  width: 10px;
  height: 50px;
}
#bt-search{
  margin-left: 20px;
}
#time{
  margin-left: 20px;
  width: 30px;
}
#busForm{
   margin-top: 20px;
   margin-left: 200px;
   width: 1035px;
   min-height: 570px;
   /*border: Solid chocolate;*/
 }
#form-row{
  font-size: 30px;
  background: #d3dce6;
  height: 50px;
}
#row{
  padding-bottom: 0;
  margin-bottom: 0;
  height: 100px;
  border-bottom: 1px Solid wheat;
}
.col{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 15%;
  height: 100px;
}
#div-time{
  /*margin-top: 30px;*/
  font-size: 30px;
}
.col-div{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  width: 100%;
  height: 49px;
}
#span-type{
  font-size: 20px;
}
#div-price{
  font-size: 30px;
  color: red;
}
#bt-book{
  width: 100px;
  background: red;
  color: white;
}

</style>
